// 商户服务
<template>
  <div class="CustomerService">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav :navindex="navindex"></goods-nav>
    <div class="w1920" :style="{ background: `url(${serverBanner}) 50% 0px no-repeat`}">
      <div class="w1200">
        <h1>合作商户</h1>
        <p>cooperation and Investment</p>
        <div :style="{ background: `url(${serverBG}) 50% 0px no-repeat`}">
          <h2>孚地共享仓</h2>

          <span>一站式采购中心</span>
          <span>海量工业零部件</span>
          <span>挖潜提质降本</span>
          <span>打造服务新生态</span>
          <!-- <i>咨询加入</i> -->
        </div>
      </div>
    </div>
    <div class="ww1200">
      <div class="principle">
        <p class="title">我们的原则</p>
        <p class="titleEn">Our principles</p>
        <ul>
          <li>
            <i>01</i>
            <img :src="icon1">
            <p>公平合作、信守不渝</p>
          </li>
          <li>
            <i>02</i>
            <img :src="icon2">
            <p>互惠互利，合作共赢</p>
          </li>
          <li>
            <i>03</i>
            <img :src="icon3">
            <p>持久战略，长期发展</p>
          </li>
        </ul>
      </div>
      <div class="FinancialServices">
        <div>
          <h1>金融服务</h1>
          <span class="yellowLine"></span>
          <p>让信用成为“流动”的财富</p>
          <!-- <p>专属金融方案 助力工业采购 资金无压力</p> -->
          <p>孚地卖场金融账期服务，助力企业解决工业品采购资金紧缺，为企业提供一站式</p>
          <p>线上账期采购服务，补充现金流。</p>
          <!-- <i>咨询加入</i> -->
        </div>
        <img v-lazyload="pic01" src="@/assets/logo/loading.png">
        <!-- <img :src="pic01"> -->
      </div>

      <div class="FinancialServices tb">
        <img v-lazyload="pic02" src="@/assets/logo/loading.png">
        <!-- <img :src="pic02"> -->
        <div>
          <h1>物流服务</h1>
          <span class="greenwLine"></span>
          <p>孚地极速物流，力求成为全国工业品供应链基础设施服务商，为你的产品保驾护航。</p>
          <!-- <p>力求成为全国工业品供应链基础设施服务商，为你的产品保驾护航</p> -->
          <!-- <i>合作咨询</i> -->
        </div>
      </div>
      <div class="ContactInformation">
        <img v-lazyload="icon5" src="@/assets/logo/loading.png">
        <!-- <img :src="c"> -->
        客服热线：400 900 1339
        <img v-lazyload="icon4" src="@/assets/logo/loading.png">
        <!-- <img :src="icon4"> -->
        客服邮箱：service@cha.jlwdf.com
      </div>
    </div>
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>

<script>
import serverBanner from "@/assets/images/serverBanner.png"
import serverBG from "@/assets/images/serverBG.png"
import icon1 from "@/assets/customerServiceIcon/icon1.png"
import icon2 from "@/assets/customerServiceIcon/icon2.png"
import icon3 from "@/assets/customerServiceIcon/icon3.png"
import pic01 from "@/assets/customerServiceIcon/pic01.png"
import pic02 from "@/assets/customerServiceIcon/pic02.png"
import icon4 from "@/assets/customerServiceIcon/icon4.png"
import icon5 from "@/assets/customerServiceIcon/icon5.png"

export default {
  name: "MerchantServices",
  data() {
    return {
      navindex: -1,
      serverBanner,
      serverBG,
      icon1,
      icon2,
      icon3,
      icon4,
      icon5,
      pic01,
      pic02
    }
  }
}
</script>
<style lang="scss" scoped>
.CustomerService {
  .w1920 {
    width: 100%;
    height: 300px;
    margin-bottom: 277px;
    .w1200 {
      width: 1200px;
      margin: auto;
      position: relative;
      h1 {
        color: #f8f8f8;
        text-align: center;
        padding-top: 74px;
        letter-spacing: 3px;
      }
      p {
        color: #aaa;
        font-size: 12px;
        text-align: center;
      }
      div {
        width: 1200px;
        height: 365px;
        background: #aaa;
        position: absolute;
        top: 184px;
        h2 {
          padding-left: 74px;
          font-size: 50px;
          color: #141414;
          padding-top: 62px;
          letter-spacing: 5px;
        }
        span {
          display: block;
          padding-left: 74px;
          font-size: 18px;
          color: #313131;
        }
        i {
          margin-left: 74px;
          margin-top: 18px;
          display: block;
          width: 120px;
          height: 36px;
          border: 2px solid #566467;
          line-height: 36px;
          font-size: 16px;
          color: #444;
          text-align: center;
          letter-spacing: 2px;
          font-weight: bold;
          cursor: pointer;
          &:hover {
            border-radius: 8px;
            transition: 0.2s;
            color: #566467;
          }
        }
      }
    }
  }
  .ww1200 {
    width: 1200px;
    margin: auto;
    .principle {
      .title {
        text-align: center;
        line-height: 40px;
        color: #262626;
        font-size: 30px;
        letter-spacing: 3px;
      }
      .titleEn {
        text-align: center;
        color: #aaaaaa;
        font-size: 16px;
        padding-bottom: 28px;
      }
      ul {
        width: 100%;
        height: 148px;
        background: #f7f7f7;
        display: flex;
        flex-direction: row;
        align-items: center;
        li {
          flex: 1;
          height: 90px;
          padding-left: 110px;
          padding-top: 20px;
          i {
            font-size: 30px;
            color: #4f4f4f;
            margin-right: 10px;
          }
          span {
            font-size: 40px;
            color: #2a2a2a;
          }
          p {
            color: #313131;
            font-size: 20px;
            letter-spacing: 1px;
            line-height: 30px;
          }
          &:nth-child(2) {
            border-left: 1px solid #dedede;
            border-right: 1px solid #dedede;
          }
        }
      }
    }
    .FinancialServices {
      margin-top: 85px;
      padding: 0 65px;
      display: flex;
      // align-items: center;
      justify-content: space-between;
      h1 {
        font-size: 30px;
        line-height: 70px;
      }
      p {
        line-height: 30px;
      }
      i {
        display: block;
        width: 120px;
        height: 39px;
        background: #ff5938;
        line-height: 39px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        letter-spacing: 2px;
        font-weight: bold;
        margin-top: 18px;
        cursor: pointer;
        &:hover {
          border-radius: 8px;
          transition: 0.3s;
        }
      }
      .yellowLine {
        display: block;
        width: 80px;
        height: 3px;
        background: #ff5938;
      }
    }
    .tb {
      text-align: right;
      padding-bottom: 30px;
      div {
        position: relative;
        .greenwLine {
          position: absolute;
          right: 0;
          display: block;
          width: 80px;
          height: 3px;
          background: #00b774;
        }
        h1 {
          text-align: right;
        }
        p {
          text-align: right;
          &:nth-child(1) {
            margin-top: 3px;
          }
        }
        i {
          background: #00b774;
          position: absolute;
          right: 0;
        }
      }
    }
    .ContactInformation {
      width: 100%;
      height: 51px;
      background: #f7f7f7;
      color: #313131;
      text-align: center;
      font-size: 16px;
      letter-spacing: 0.5px;
      line-height: 35px;
      padding-top: 16px;
      img {
        padding: 0 8px;
      }
    }
  }
}
</style>


